<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地图</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }
        .amap-icon img {
            width: 15px;
            height: 15px;
        }
        .amap-marker-label{
            border: 0;
            background-color: transparent;
          
        }
        .info{
            position: relative;
            margin-left: -10px;
            top: 0;
            right: 0;
            min-width: 0;
            padding: 6px;
        }
        .triangle {
            position:relative;
            padding: 5px;
            background:#ffffffcf;
            box-shadow:1px 2px 3px #00CA9D;
            border:1px solid #00CA9D;
            border-radius:10px;
            text-align:center;
            width: 180px;
        }
        .transform {
            position:absolute;
            bottom:-10px;
            left:20px;
            overflow:hidden;
            width:20px;
            height:20px;
            background:#ffffff5b;
            border-bottom:1px solid #00CA9D;
            border-right:1px solid #00CA9D;
            -webkit-transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            -o-transform:rotate(45deg);
            transform:rotate(45deg);
        }
        .text_content{
            z-index: 100;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=b84d35a04218b181f4154561070f44a6"></script>
<script type="text/javascript">
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [117.202302,39.124795],
        zoom: 12,
    });
    window.onload=function(){
        //要通知鸿蒙端调用setLocation
        window.mapSight.showSight()
    }

   
    function getMarker(dataItem) {
    
        // let position='[{"content":"张学良故居","location":[117.201668,39.123938]},{"content":"小白楼","location":[117.21492,39.115676]}]';
    
        JSON.parse(dataItem).forEach((item)=>{
        var marker = new AMap.Marker({
            position: item.location,
            icon: 'https://diqu.16fan.com/common/css/sprite/lazymap/point-blue@3x.png',
            anchor:'bottom-center',
            offset: new AMap.Pixel(0, 0)
        });

        marker.setMap(map);
        let content = `<div class="triangle"><div class="transform"></div><span class="text_content">${item.content}<img style="width: 10px;aspect-ratio: 1; margin-left:7px;" src=""></span></div>`; // 设置文本标注内容
        // 设置label标签
        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
        marker.setLabel({
            direction:'top',
            offset: new AMap.Pixel(65,-10),  //设置文本标注偏移量
            content: content, //传入字符串拼接的 DOM 元素
        });
      
    })
    map.setFitView(null, false, [30, 30, 30, 30]);

    }
  


   


    

  

</script>
</body>
</html>